<template>
  <div class="container-page container-page-zhuanti">
    <el-form label-position="right" label-width="80px" size="mini">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="封面">
        <itemUploadPoster @getPoster="getPoster" />
      </el-form-item>
      <el-form-item label="阅读量">
        <el-input-number v-model="form.hit" :min="0" :max="748943649" />
      </el-form-item>
      <el-form-item label="关键词">
        <tagEdit v-if="procucers.length > 0" :value="procucers" @change="tagChangeHandler" />
      </el-form-item>
      <el-form-item label="内容">
        <itemEditer v-if="showEditer" :value="form.description" @change="editChangeHandler" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// api
import { createProject, getProject, updateProject } from '@/api/miva';
// item
import itemUploadPoster from '@/components/miva-item/item-upload-poster';
import itemEditer from '@/components/miva-item/item-editer';
import tagEdit from '@/components/miva-item/item-tag-edit';
export default {
  components: { itemEditer, tagEdit, itemUploadPoster },
  data() {
    return {
      showEditer: false,
      procucers: [],
      form: {
        title: '',
        poster: '',
        type: 5,
        description: '',
        tag: '',
        procucer: '',
        href: '',
        hit: 0
      }
    };
  },
  computed: {
    nowProjectID() {
      return this.$route.query.id;
    }
  },
  async mounted() {
    if (this.nowProjectID) {
      await this.getProject();
    } else {
      await this.clearBuffer();
    }
    this.showEditer = true;
  },
  methods: {
    async submit() {
      console.log(this.form);
      let isComplete = true;
      if (this.nowProjectID) {
        console.log('修改项目');
        isComplete = await this.updateProject();
      } else {
        console.log('添加项目');
        isComplete = await this.createProject();
      }
      console.log(isComplete);
      if (isComplete) {
        this.$router.replace({ path: '/' });
      }
    },
    // 添加项目
    async createProject() {
      const res = await createProject({ data: this.form });
      if (res.error) {
        res.error.reverse();
        for (const val of res.error) {
          this.$message.error(val.message);
        }
        return false;
      }
      this.$notify({
        title: '提示',
        message: res.message,
        offset: 60
      });
      return true;
    },
    // 修改项目
    async updateProject() {
      const res = await updateProject({
        id: this.nowProjectID,
        data: this.form
      });
      console.log(res);
      if (res.code !== 200) {
        return false;
      }
      this.$notify({
        title: '提示',
        message: res.message,
        offset: 60
      });
      return true;
    },
    // 清空buffer数据
    async clearBuffer() {
      this.$store.commit('unmcc/SETTING_TAG_BUFFER', []);
      this.$store.commit('unmcc/SETTING_POSTER_BUFFER', []);
    },
    // 获取单个专题
    async getProject() {
      const { data } = await getProject({ id: this.nowProjectID });
      console.log(data);
      this.form.title = data.title;
      this.form.description = data.description;
      this.form.href = data.href;
      this.form.hit = data.hit;
      // 标签
      this.form.procucer = data.procucer;
      this.procucers = data.procucer.split(',');
      // 海报
      this.form.poster = data.poster_id;
      const arr = [];
      for (const key in data.poster_id.split(',')) {
        arr.push({
          id: data.poster_id.split(',')[key],
          img: data.poster.split(',')[key]
        });
      }
      this.$store.commit('unmcc/SETTING_POSTER_BUFFER', arr);
    },
    // 获取组件发送过来的海报
    getPoster(poster) {
      this.form.poster = poster.toString();
    },
    editChangeHandler(data) {
      this.form.description = data;
    },
    tagChangeHandler(data) {
      this.form.procucer = data;
    }
  }
};
</script>
